<div class="row-fluid">
    <div class="span6">
        <ul class="pagination" data-th-if="${pi.pages gt 1 and pi.pages le 7}">
            <li class="page-item" data-th-classappend="${pi.isFirstPage} ? 'disabled' : ''">
                <a href="javascript:void(0);" th:onclick="'pagechange(\''+${pi.pageNum - 1}+'\')'"
                   class="page-link" data-th-attr="pageIndex=${pi.pageNum} - 1" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>

            <li class="page-item" data-th-each="i : ${#numbers.sequence(1, pi.pages)}"
                data-th-classappend="${pi.pageNum eq i} ? 'active' : ''">
                <a class="page-link" data-th-attr="pageIndex=${i} - 1" href="javascript:void(0);"
                   th:onclick="'pagechange(\''+${i}+'\')'">
                    <span data-th-text="${i}"></span>
                </a>
            </li>

            <li class="page-item" data-th-classappend="${pi.isLastPage} ? 'disabled' : ''">
                <a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} + 1"
                   aria-label="Next"
                   th:onclick="'pagechange(\''+${pi.pageNum + 1}+'\')'">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>

        <!-- 处理页数大于7 的情况 -->
        <ul class="pagination" data-th-if="${pi.pages gt 7}">
            <!-- 上一页 -->
            <li class="page-item" data-th-classappend="${pi.isFirstPage} ? 'disabled' : ''">
                <a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} - 1"
                   aria-label="Previous" th:onclick="'pagechange(\''+${pi.pageNum - 1}+'\')'">
                    <span aria-hidden="true">«</span>
                </a>
            </li>

            <!-- 首页 -->
            <li class="page-item" data-th-classappend="${(pi.pageNum) eq 1} ? 'active' : ''">
                <a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=0"
                   th:onclick="'pagechange(\'1\')'">1</a>
            </li>


            <!-- 当前页面小于等于4 -->
            <li class="page-item" data-th-if="${(pi.pageNum) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}"
                data-th-classappend="${(pi.pageNum) eq i} ? 'active' : ''">
                <a class="page-link" href="javascript:void(0);" data-th-attr="pageIndex=${i} - 1"
                   th:onclick="'pagechange(\''+${i}+'\')'">
                    <span data-th-text="${i}"></span>
                </a>
            </li>

            <li class="page-item disabled" data-th-if="${(pi.pageNum) le 4}">
                <a href="javascript:void(0);" class="page-link">
                    <span aria-hidden="true">...</span>
                </a>
            </li>

            <!-- 最后一页与当前页面之差，小于等于3 -->
            <li class="page-item disabled" data-th-if="${(pi.pages-(pi.pageNum)) le 3}">
                <a href="javascript:void(0);" class="page-link">
                    <span aria-hidden="true">...</span>
                </a>
            </li>
            <li class="page-item" data-th-if="${(pi.pages-(pi.pageNum)) le 3}"
                data-th-each="i : ${#numbers.sequence(pi.pages-4, pi.pages-1)}"
                data-th-classappend="${(pi.pageNum) eq i} ? 'active' : ''">
                <a class="page-link" href="javascript:void(0);" data-th-attr="pageIndex=${i} - 1"
                   th:onclick="'pagechange(\''+${i}+'\')'">
                    <span data-th-text="${i}"></span>
                </a>
            </li>

            <!-- 最后一页与当前页面之差大于3，且  当前页面大于4-->

            <li class="page-item disabled" data-th-if="${((pi.pageNum) gt 4) and ((pi.pages-(pi.pageNum)) gt 3 )}">
                <a href="javascript:void(0);" class="page-link">
                    <span aria-hidden="true">...</span>
                </a>
            </li>
            <li class="page-item" data-th-if="${(pi.pageNum gt 4) and ((pi.pages-pi.pageNum) gt 3 )}">
                <a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum}"
                   th:onclick="'pagechange(\''+${pi.pageNum}+'\')'">[[${pi.pageNum}]]</a>
            </li>
            <li class="page-item active" data-th-if="${(pi.pageNum gt 4) and ((pi.pages-pi.pageNum) gt 3 )}">
                <a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} + 1"
                   th:onclick="'pagechange(\''+${pi.pageNum + 1}+'\')'">[[${pi.pageNum + 1}]]</a>
            </li>
            <li class="page-item" data-th-if="${(pi.pageNum gt 4) and ((pi.pages-pi.pageNum) gt 3 )}">
                <a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} + 2"
                   th:onclick="'pagechange(\''+${pi.pageNum + 2}+'\')'">[[${pi.pageNum + 2}]]</a>
            </li>

            <li class="page-item disabled" data-th-if="${(pi.pageNum gt 4) and ((pi.pages-pi.pageNum) gt 3 )}">
                <a href="javascript:void(0);" class="page-link">
                    <span aria-hidden="true">...</span>
                </a>
            </li>

            <!-- 最后一页 -->
            <li class="page-item" data-th-classappend="${(pi.pageNum) eq pi.pages} ? 'active' : ''">
                <a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pages} - 1"
                   data-th-text="${pi.pages}"
                   th:onclick="'pagechange(\''+${pi.pages}+'\')'"></a>
            </li>

            <!-- 下一页 -->
            <li class="page-item" data-th-classappend="${pi.isLastPage} ? 'disabled' : ''">
                <a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} + 1"
                   aria-label="Next"
                   th:onclick="'pagechange(\''+${pi.pageNum + 1}+'\')'">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="span6">
        <div class='page_select' data-th-if="${pi.pages gt 1}">每页
            <select id="pageSize" name='pageSize' th:onchange="'pagechange(1);'">
                <option value='5' th:selected="${pi.pageSize} == 5">5</option>
                <option value='10' th:selected="${pi.pageSize} == 10">10</option>
                <option value='20' th:selected="${pi.pageSize} == 20">20</option>
                <option value='30' th:selected="${pi.pageSize} == 30">30</option>
                <option value='40' th:selected="${pi.pageSize} == 40">40</option>
            </select>条&nbsp;共<span th:text="${pi.total}"></span>条&nbsp;页码:
            <select id="pageIndex" name="pageIndex" th:onchange="'pagechange(this.value);'" th:field="*{pageIndex}">
                <option th:each="page : ${#numbers.sequence(1, pi.pages)}" th:value="${page}" th:text="${page}">1
                </option>
            </select>/<span th:text="${pi.pages}">10</span>
        </div>
    </div>
</div>